<template>
  <div class="app-container">
    <el-empty v-if="!exmaInfo" description="暂无考试" />
    
    <el-card v-else v-loading="loading" class="exam-info-card">
      <template #header>
        <div class="card-header">
          <span class="title">考试信息</span>
          <el-button 
            v-if="isExamTimeValid" 
            type="primary" 
            @click="handleStartExam"
          >开始考试</el-button>
        </div>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="考试名称">{{ exmaInfo?.examName }}</el-descriptions-item>
        <el-descriptions-item label="考试状态">
          <dict-tag v-if="!exmaInfo?.submit" :options="sys_common_status" :value="exmaInfo?.status"/>
          <el-tag v-else type="success">已提交</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ parseTime(exmaInfo?.startTimeStr, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ parseTime(exmaInfo?.endTimeStr, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="考试时长">{{ exmaInfo?.duration }}分钟</el-descriptions-item>
        <el-descriptions-item label="难度等级">
          <dict-tag :options="difficulty_level" :value="exmaInfo?.difficultyLevel"/>
        </el-descriptions-item>
        <el-descriptions-item label="总分数">{{ exmaInfo?.totalScore }}分</el-descriptions-item>
        <el-descriptions-item label="题目数量">{{ exmaInfo?.totalNum }}题</el-descriptions-item>
      </el-descriptions>

      <div class="exam-time-info">
        <el-alert
          v-if="exmaInfo"
          :title="getExamTimeStatus()"
          :type="getExamTimeStatusType()"
          :closable="false"
          show-icon
        />
      </div>
    </el-card>
  </div>
</template>

<script setup name="Exam">
import { myExam, myExamInfo } from "@/api/business/exam";
import { parseTime } from '@/utils/ruoyi';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const exmaInfo = ref(null);
const loading = ref(true);
const router = useRouter();

const data = reactive({
  form: {} 
});

const { form } = toRefs(data);

// 计算属性：判断当前是否在考试时间范围内
const isExamTimeValid = computed(() => {
  if (!exmaInfo.value) return false;
  if (exmaInfo.value.submit) return false;
  const now = new Date();
  const startTime = new Date(exmaInfo.value.startTimeStr);
  const endTime = new Date(exmaInfo.value.endTimeStr);
  return now >= startTime && now <= endTime;
});

/** 查询考试表列表 */
function getMyExam() {
  loading.value = true;
  myExam().then(response => {
    exmaInfo.value = response.data;
    loading.value = false;
  });
}

/** 开始考试 */
function handleStartExam() {
  if (!exmaInfo.value) {
    ElMessage.warning('暂无考试信息');
    return;
  }
  
  if (!isExamTimeValid.value) {
    ElMessage.warning('当前不在考试时间范围内');
    return;
  }
  
  router.push({
    path: '/question/kaoshi',
    query: { id: exmaInfo.value.id }
  });
}

/** 获取考试时间状态 */
function getExamTimeStatus() {
  if (!exmaInfo.value) return '';
  const now = new Date();
  const startTimeStr = new Date(exmaInfo.value.startTimeStr);
  const endTimeStr = new Date(exmaInfo.value.endTimeStr);
  
  if (now < startTimeStr) {
    return '考试尚未开始';
  } else if (now > endTimeStr) {
    return '考试已结束';
  } else {
    return '考试进行中';
  }
}

/** 获取考试时间状态类型 */
function getExamTimeStatusType() {
  if (!exmaInfo.value) return 'info';
  const now = new Date();
  const startTimeStr = new Date(exmaInfo.value.startTimeStr);
  const endTimeStr = new Date(exmaInfo.value.endTimeStr);
  
  if (now < startTimeStr) {
    return 'info';
  } else if (now > endTimeStr) {
    return 'warning';
  } else {
    return 'success';
  }
}

function getMyExamInfo(examId) {
  loading.value = true;
  myExamInfo(examId).then(response => {
    loading.value = false;
    // TODO: 处理考试信息，例如跳转到考试页面
    console.log(response);
  }).catch(() => {
    loading.value = false;
  });
}

getMyExam();
</script>

<style scoped>
.exam-info-card {
  margin: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.exam-time-info {
  margin-top: 20px;
}

:deep(.el-descriptions) {
  margin: 20px 0;
}

:deep(.el-descriptions__label) {
  width: 120px;
  font-weight: bold;
}

:deep(.el-descriptions__content) {
  padding: 12px 20px;
}
</style>
